<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Toolbars</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <style type="text/css" media="screen">
        .add {
            background-image: url(../shared/icons/fam/add.gif) !important;
        }
    </style>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        Ext.onReady(function() {
            var panel = Ext.create('Ext.window.Window', {
                renderTo: Ext.getBody(),
                autoShow: true,
                height: 300,
                width: 500,
                title: 'Users',

                tbar: [
                    {
                        xtype: 'splitbutton',
                        text: 'Add',
                        iconCls: 'add',
                        handler: function() {
                            alert('add button clicked');
                        },
                        menu: [
                            {
                                text: 'Customer'
                            },
                            {
                                text: 'Salesperson',
                                menu: [
                                    {
                                        text: 'Senior'
                                    },
                                    {
                                        text: 'Junior'
                                    }
                                ]
                            }
                        ]
                    },
                    '-',
                    {
                        iconCls: 'add'
                    },
                    '-',
                    {
                        text: 'Edit'
                    },
                    ' ',
                    {
                        text: 'Delete'
                    },
                    'Your Name',
                    {
                        xtype: 'textfield',
                        itemId: 'nameField'
                    },
                    {
                        text: 'Go',
                        handler: function() {
                            alert(panel.down('#nameField').getValue());
                        }
                    },
                    {text: 'Button 1'},
                    {text: 'Button 1'},
                    {text: 'Button 1'},
                    {text: 'Button 1'},
                    {text: 'Button 1'},
                    {text: 'Button 1'}
                ]
            });
        });
    </script>
</body>
</html>
